<template>
  <div>
    <!--<input id="file" ref="file" type="file" />
     <fileupload target="http://localhost:8000/api/upload" ref="file" 
    v-on:progress="progress" 
    v-on:start="startUpload" 
    v-on:finish="finishUpload" 
    action="POST">
    
    </fileupload> -->
    
  <uploader :autoStart="false" :attrs="attrs" :options="options" ref="uploader" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>Drop files here to upload or</p>
      <uploader-btn color="primary">select files</uploader-btn>
      <uploader-btn :attrs="attrs">select images</uploader-btn>
      
         <select v-model="userpath" class="select">
           <option disabled value="">请选择上传路径</option>
           <option @select="selectDefault">{{dfuserpath}}</option>
           <option v-for="(item, i) in items" :key="i"  :userpath="item.filePath+item.filename" 
           >{{item.filePath+item.filename}}</option>

         </select>
      

      <v-btn @click="up()">UPLOAD</v-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
  </uploader>


    <!-- <v-btn @click="submit">submit</v-btn> -->
    
<!-- <div class="text-xs-center">
    
    <v-progress-circular
      :rotate="360"
      :size="100"
      :width="15"
      :value="value"
      color="primary"
    >{{ value }}</v-progress-circular>
</div>
    <v-layout row justify-center>
      <v-dialog v-model="dialog" scrollable max-width="300px">
        <v-btn slot="activator" color="primary" dark>Open Dialog</v-btn>
        <v-card>
          <v-card-title>Select Country</v-card-title>
          <v-divider></v-divider>
          <v-card-text style="height: 300px;">
            <p>TEST Dialog</p>
          </v-card-text>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
            <v-btn color="blue darken-1" flat @click="dialog = false">Save</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
    -->
  </div> 
</template>
<script>

export default {

  name: "upload",
  components: {

  },
    data: () => ({
    dialog: false,
    interval:{},
    value:0,
    dfuserpath:'',
    userpath:'',
    items:[],
    options: {
          // https://github.com/simple-uploader/Uploader/tree/develop/samples/Node.js

          target: '/upload/',
          // autoStart:false,
          chunkSize: '20480000',
          testChunks: false,

        },
        attrs: {
          accept: 'image/*',
        }
  }),
  created(){
    
  },

    mounted(){
      this.getUserFolders();
      this.dfuserpath='/'+sessionStorage.getItem('username');
      this.userpath=this.dfuserpath;
    },



  methods: {
    up(){
      
      const uploaderInstance = this.$refs.uploader.uploader;
      uploaderInstance.opts.query={
        username:sessionStorage.getItem("username"),
        userpath:this.userpath
      };
       
      alert(sessionStorage.getItem("username"));
      uploaderInstance.resume();
    },
    selectDefault(){
      this.userpath=this.dfuserpath;
    },

    getUserFolders(){
      this.$http.post("/file/folderList/" + sessionStorage.getItem("username") + "?access_token=" + sessionStorage.getItem("token"),{})
      .then(response =>{
       
        this.items=response.data;
        
      });
    }


/*
    submit() {
      //console.log(this.$refs.file.files[0].name);
      var file = this.$refs.file.files[0];
        var config = {
        onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%';
            this.value = complete;
        }
    }
      let formData = new FormData();
      formData.append("file", file);
      formData.append("username", sessionStorage.getItem("username")); //传输用户名
      formData.append("userpath","/am")
      //formData.append("filepath",)
      this.$http
        .post("/file/upload", formData,config)
        .then(rs => {
          console.log(rs.data);
        })
        .catch(err => {
          alert(err);
        });
    }*/

    }
};

</script>
<style lang="stylus" scoped>
$color-pack = false
@import '~vuetify/src/stylus/main'
  .v-progress-circular
    margin: 1rem

  .uploader-example{
    width: 880px;
    padding: 15px;
    margin: 40px auto 0;
    font-size: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .4);
  }
  .uploader-example .uploader-btn {
    margin-right: 4px;
  }
  .uploader-example .uploader-list {
    max-height: 440px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
  }

	.select {
		display: inline-block;
		width: 300px;
		position: relative;
		vertical-align: middle;
		padding: 0;
		overflow: hidden;
		background-color: #fff;
		color: #555;
		border: 1px solid #aaa;
		text-shadow: none;
		font-size :16px;
		transition: box-shadow 0.25s ease;
		z-index: 2;
	}
 
	.select:hover {
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	}
 
	.select:before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 10px solid transparent;
		border-top-color: #ccc;
		top: 14px;
		right: 10px;
		cursor: pointer;
		z-index: -2;
	}
	.select select {
		cursor: pointer;
		padding: 10px;
		width: 100%;
		border: none;
		background: transparent;
		background-image: none;
		-webkit-appearance: none;
		-moz-appearance: none;
	}
 
	.select select:focus {
		outline: none;
	}

</style>